<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 1000px;
            height: 500px;
            margin: 50px auto;
            display: flex;
            justify-content: space-between;
        }
        .min{
            width:350px;
            height: 350px;
            background-image: url("./mouse.jpg");
            position: relative;
            border: 1px solid;
        }
        .min .masking{
            width: 50px;
            height: 50px;
            background-color: rgba(242, 255, 0, .5);
            position: absolute;
            display: none;

        }
        .big{
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
            border: 1px solid;
            display: none;

        }
        .big img{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 左边的小盒子 -->
        <div class="min">
            <!-- 蒙版 -->
            <div class="masking"></div>
        </div>
        <!-- 右边的大盒子 -->
        <div class="big">
            <img class="big-img" src="./mouseBigSize.jpg" alt="">
        </div>
    </div>

    <script>
        let min=document.getElementsByClassName("min")[0];
        let masking=document.getElementsByClassName("masking")[0];
        let big=document.getElementsByClassName("big")[0];
        let bigImg=document.getElementsByClassName("big-img")[0];

        // 鼠标移入左边小盒子，蒙版和右边大盒子出现
        min.onmouseenter=function(){
            masking.style.display="block";
            big.style.display="block";
        }
        // 鼠标移出左边小盒子，蒙版和右边大盒子消失
        min.onmouseleave=function(){
            masking.style.display="none";
            big.style.display="none";
        }
        // 鼠标在左边小盒子里面移动，蒙版跟随移动，右边大盒子里面的图片跟随移动
        min.onmousemove=function(){
            masking.style.left=event.clientX-masking.offsetWidth/2-min.offsetLeft+"px";
            masking.style.top=event.clientY-masking.offsetHeight/2-min.offsetTop+"px";
            // 水平方向的边界
            if(masking.offsetLeft<=0){
                masking.style.left=0;
            }else if(masking.offsetLeft>=min.offsetWidth-masking.offsetWidth){
                masking.style.left=min.offsetWidth-masking.offsetWidth+"px";
            }
            // 垂直方向的边界
            if(masking.offsetTop<=0){
                masking.style.top=0;
            }else if(masking.offsetTop>=min.offsetHeight-masking.offsetHeight){
                masking.style.top=min.offsetHeight-masking.offsetHeight+"px";
            }

            // 右边盒子图片移动
            bigImg.style.left=-(event.clientX-masking.offsetWidth/2-min.offsetLeft)*(big.offsetWidth/min.offsetWidth)+"px";
            bigImg.style.top=-(event.clientY-masking.offsetHeight/2-min.offsetTop)*(big.offsetHeight/min.offsetHeight)+"px";
        }

    </script>
</body>
</html>